import { memo } from 'react';

import { Switch, Divider } from 'antd';

import './index.less';
import { useRecoilValue, useSetRecoilState } from 'recoil';
import { fixedHeaderState, globalState, StateType, tabNavEnableState } from '@/store/global';

const Settings = memo(() => {
  console.log('render Settings');
  const setGlobalState = useSetRecoilState(globalState);
  const tabNavEnable = useRecoilValue(tabNavEnableState);
  const fixedHeader = useRecoilValue(fixedHeaderState);

  const setGlobalStateValue = <T extends StateType>(key: keyof T, value: T[keyof T]) => {
    setGlobalState((prevState) => ({ ...prevState, [key]: value }));
  };

  const toggleTagsView = (e: boolean) => {
    setGlobalStateValue('tabNavEnable', e);
  };

  const toggleFixedHeader = (e: boolean) => {
    setGlobalStateValue('fixedHeader', e);
  };

  return (
    <div className={'drawerContainer'}>
      <div>
        <Divider> 系统布局配置 </Divider>

        <div className={'drawerItem'}>
          <span>开启 TagsView</span>
          <Switch checked={tabNavEnable} onChange={toggleTagsView} className={'drawerSwitch'} />
        </div>

        <div className={'drawerItem'}>
          <span>固定 Header</span>
          <Switch checked={fixedHeader} onChange={toggleFixedHeader} className={'drawerSwitch'} />
        </div>
      </div>
    </div>
  );
});

export default Settings;
